<template>
    <div>
        <Topbar class="top">房博士</Topbar>
        <div class="main">
            <div class="main-top" >
                <span ref="wd" @click="select">问答</span>
                <span ref="bk" @click="select">百科</span>
            </div>
            <Swiper
                class="main-top-pic"
                :list="wenda"
                auto
                loop
                dots-position="center"
                height="126px"
            ></Swiper>

            <!--问答-->
           <div class="main-inner" v-if="show">
                    <!--明星房博士-->
                <div class="housestar">
                    <div v-for="h in houseatar" class="boshi">
                        <img :src="h.img" class="zhuanjia">
                        <br>
                        <span class="txt">{{h.name}}</span>
                        <br>
                        <span  class="txt1">{{h.type}}</span>
                        <br>
                        <span class="txt3">向TA咨询</span>
                    </div>
                </div>

                <div class="bswd">
                    <div >
                        <span>值班博士免费解答</span>
                        <img src="static/wenda/doc.png" alt="">
                    </div>
                    <div>
                        <span class="tiwen">我来提问</span>
                    </div>
                    <span></span>
                </div>

                <div class="redian">
                    <div>
                        <span style="color:#FF6900">|</span>
                        <span>热点</span>
                    </div>
                    <div>
                        <span>更多</span>
                        <span class="fa fa-chevron-right"></span>
                    </div>
                </div>
                
                <!--问答热点帖子-->
                <div class="w">
                    <div class="w1">
                        请问 江宁滨江和江宁禄口 哪个更值得购买！两个一定要选一个
                    </div>
                    <div class="w2">
                        您好，两个板块确实挺难抉择，都处于潜力区域，但我个人推荐禄口，因为我也选择了禄口。
                    </div>
                    <div class="w3">
                        <span class="fa fa-paperclip"></span>
                        <span>城建规划</span>
                    </div>
                    <div class="w4">
                        <div class="w4-left">
                            <img src="static/wenda/20.jpg" >
                            <span style="color:black">汤苗苗</span>
                            <span>|</span>
                            <span>2017-11-02</span>
                        </div>
                        <div class="w4-right">
                            <span class="fa fa-thumbs-o-up"></span>
                            <span>104</span>
                        </div>
                    </div>
                </div>
           </div>


            <!--百科-->
            <div class="baike"v-else>
                <div></div>

                <div class="baike-jx">
                    <div></div>
                    <div v-for="b in baike" class="baikenew">
                        <img :src="b.img" class="bkpic">
                        <span class="txt2">{{b.msg}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
import Topbar from '../components/Topbar.vue'
import {Swiper} from 'vux';
import {mapState} from 'vuex'
    export default{
        data:function(){
            return {
                show:true
            }
        },
        components:{
            Topbar,
            Swiper
        },
        computed:{
            ...mapState([
                "wenda",
                "houseatar",
                "baike"
            ])
        },
        methods:{
            select:function(e){
                // console.log(e.target.innerHTML)
                if(e.target.innerHTML=="问答"){
                    this.show =true;
                    this.$refs.bk.style="border-bottom:none ;color:black";
                    this.$refs.wd.style="border-bottom: 1px solid #FF6900;color:#FF6900";
                }
                if(e.target.innerHTML=="百科"){
                    this.show =false;
                    this.$refs.wd.style="border-bottom:none ;color:black";
                    this.$refs.bk.style="border-bottom: 1px solid #FF6900;color:#FF6900"
                }
            }
        },
        mounted:function(){
              this.$refs.wd.style="border-bottom: 1px solid #FF6900;color:#FF6900";
        }
    }
</script>

<style scoped>
.top{
    position: fixed;
    width: 100%;
    z-index: 50
}

.main{
    padding-top: 44px;
    background-color: #F6F6F6;
}
.main-top{
    text-align: center;
    padding: 10px;
}
.main-top-pic{
    width: 100%;
}
.housestar{
    background-image: url("/static/pic/Bgindex.jpg");
    background-size: 100% 100%;
    /*height: 500px;*/
    width: 100%;
    display: flex;
    overflow-x: scroll;
    text-align: center;
    margin-top: 8px;
}
.zhuanjia{
    height: 80px;
    width: 80px;
    border-radius: 50%;
}
.boshi{
    padding:  50px 10px 10px 10px;
}
.txt1{
    font-size: 10px;
    color: #666666;
}
.txt{
    font-size: 12px;
    margin-top: 10px;
}
.txt2{
    font-size: 14px;
    text-indent: 2em;
    padding: 4px;
}
.txt3{
    display: inline-block;
    border: 1px solid #FF6900;
    color: #FF6900;
    font-size: 12px;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 4px;
}
.bswd{
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    /*border: 1px solid black;*/
    background-color: white;
    font-size: 14px;
    padding: 10px 8px;
}
.bswd img{
    height: 20px;
    width: 20px;
    vertical-align: middle;
}
.tiwen{
    display: inline-block;
    border: 1px solid #999999;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 3px;
    color: #999999;
    position: relative;
    right:-45px;
}
.redian{
    margin-top: 10px;
    padding: 10px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px  solid #eeeeee;
}
.redian div:nth-of-type(1){
    font-size: 12px;
}
.redian div:nth-of-type(2){
    font-size: 10px;
    color: #999999;
}
.w{
    background-color: white;
    margin-top: 10px;
}
.w1{
    font-size: 12px;
    text-indent: 2em;
    padding: 10px;
}
.w2{
    font-size: 10px;
    margin-top: 8px;
    color: #999999;
    text-indent: 2em;
    padding: 10px;
}
.w3{
    color: #4b8ec7;
    font-size: 10px;
    margin-top: 8px;
    border-bottom: 1px  solid #eeeeee;
    padding: 10px;
}
.w4{
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    padding: 10px 10px 0 10px;
    font-size: 12px;
    color: #999999;
}
.w4 img{
    margin-top: 8px;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    vertical-align: top;
}
.bkpic{
    height: 50px;
    width: 50px;
}
.baikenew{
    display: flex;
    padding: 8px;
}
</style>